import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import NavBar from '@/components/NavBar'
import { List, Popup, Toast, Modal } from 'antd-mobile'
import { useDispatch, useSelector } from 'react-redux'
import { getUserProfile, updateProfile } from '@/store/actions/profile'
import EditInput from './EditInput'
import EditList from './EditList'
import { logout } from '@/store/actions/login'
import { useHistory } from 'react-router-dom'
export default function ProfileEdit() {
  const history = useHistory()
  // 控制头像和性别
  const config = {
    photo: [
      {
        title: '拍照',
        onClick: () => {
          console.log('拍照');
        }
      },
      {
        title: '本地选择',
        onClick: () => {
          console.log('本地选择');
        }
      }
    ],
    gender: [
      {
        title: '男',
        onClick: () => {
          onCommit('gender', 0)
        }
      },
      {
        title: '女',
        onClick: () => {
          onCommit('gender', 1)
        }
      }
    ]
  }
  // 控制弹出层的显示和隐藏
  const [visible, setVisible] = useState({
    visible: false,
    type: ''
  })
  //退出
  const onLogout = () => {
    // 弹窗显示
    // 删除token
    // 返回到登录页
    // 消息提示
    Modal.confirm({
      content: '确定退出吗？',
      header: '温馨提示',
      onConfirm: () => {
        dispatch(logout())
        // console.log(1);
        history.replace('/login')
      }
    })
  }
  // 控制底部弹出层的显示和隐藏
  const [open, setOpen] = useState({
    open: false,
    type: ''
  })
  const onCloseProp = () => {
    setVisible({
      visible: false,
      type: ''
    })
    setOpen({
      open: false,
      type: ''
    })
    // console.log(1);
  }
  const onCommit = async (type, value) => {
    // console.log(type, value);
    await dispatch(updateProfile({
      [type]: value
    }))
    Toast.show({
      content: '修改成功',
      icon: 'success'
    })
    onCloseProp()
  }
  const profile = useSelector(state => state.profile.profile)
  // console.log(profile);
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getUserProfile())
  }, [dispatch])
  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar>个人信息</NavBar>
      <div className="wrapper">
        {/* list组件 */}
        <List className="profile-list">
          <List.Item onClick={() => {
            setOpen({
              open: true,
              type: 'gender'
            })
          }} extra={
            <span className="avatar-wrapper">
              <img src={''} alt="" />
            </span>
          }>
            头像
          </List.Item>
          <List.Item extra={profile.name} onClick={() => {
            setVisible({
              visible: true,
              type: 'name'
            })
          }}>
            昵称
          </List.Item>
          <List.Item extra={
            <span className="intro">{profile.intro || '未填写'}</span>
          }
            onClick={() => {
              setVisible({
                visible: true,
                type: 'intro'
              })
            }}
          >
            简介
          </List.Item>
        </List>
        <div className="profile-list">
          <List>
            <List.Item extra={profile.gender === 0 ? '男' : '女'} onClick={() => {
              setOpen({
                open: true,
                type: 'gender'
              })
            }}>
              性别
            </List.Item>

          </List>
        </div>
        {/* 底部栏：退出登录按钮 */}
        <div className="logout">
          <button className="btn" onClick={onLogout}>退出登录</button>
        </div>
      </div>
      {/* 侧边弹出层 */}
      <Popup
        position='right'
        visible={visible.visible}
        bodyStyle={{ height: '100vh', width: '100vw' }}
      >
        {
          visible.visible && <EditInput onCloseProp={onCloseProp} type={visible.type} onCommit={onCommit}></EditInput>
        }
      </Popup>
      {/* 底部弹出层 */}
      <Popup
        onMaskClick={() => { onCloseProp() }}
        position='bottom'
        visible={open.open}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px'
        }}
      >
        {
          open.open && <EditList config={config} onCloseProp={onCloseProp} type={open.type}></EditList>
        }
      </Popup>
    </div>
  )
}
